<template>
	<view class="box">
		<view class="center">
			<view class="left_img">
				
			</view>
			
			<view class="right_content">
				
				<view class="row1">
					iPhone 14 Pro max
				</view>
				<view class="row2">
					4800万像素主摄丨 a16强势驱动
				</view>
				<view class="row3">
					新用户专享 丨 信用免押 丨 顺丰包邮
				</view>
				<view class="row4" :style="{background:'url('+$BASE_URL + picList[6] +');',backgroundSize:'cover'}">
					<view class="row4-left">
						<view class="text-style">
							直降
						</view>
						<view class="text-style">
							￥200
						</view>
					</view>
					<view class="row4-right">
						<view class="text-style">
						券后￥20/天
						</view>
						<view class="text-style">
							领券购买
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			picList:{
				type:Array,
				default:[]
			}
		},
		data(){
			return {
				
				
			}
			
		},
		methods:{
			
			
			
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.text-style {
		font-size: 24rpx;
		color: #fff;
		
	}
	.box {
		width: 100%;
		height: 100%;
		// background-color: aquamarine;
		padding: 15rpx;
		box-sizing: border-box;
		.center {
			display: flex;
			width: 100%;
			height: 100%;
			// background-color: aquamarine;
			
			
			.left_img {
				width: 250rpx;
				height: 250rpx;
				border-radius: 20rpx;
				background-color: gainsboro;
				overflow: hidden;
			}
			
			.right_content {
				padding-left: 20rpx;
				.row1 {
					font-size: 30rpx;
					color: #333333;
					font-weight: bold;
				}
				.row2 {
					font-size: 24rpx;
					color: #fa6e3e;
					margin: 20rpx 0;
				}
				.row3 {
					font-size: 22rpx;
					color: #333333;
					margin-bottom: 27rpx;
				}
				.row4{
					width: 367rpx;
					height: 76rpx;
					// background-color: #fa6e3e;
					display: flex;
					justify-content: space-between;
					padding: 0 30rpx;
					.row4-left {
						width: 90rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;

						align-items: center;
					}
					.row4-right {
						width: 166rpx;
						height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
					}
				}
			}
		}
	}
	
	
</style>